<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <div class="head-div">
          <img src="../assets/zjt2.png" alt="" class="back" @click="back()" />
        </div>
        <div class="head-search">公司资料</div>
        <div>保存</div>
      </div>
    </div>
    <div class="content">
        <div class="inpBox">
        <span>LOGO</span>
        <input
          v-show="false"
          type="file"
          accept="image/*"
          @change="tirggerFile($event)"
          ref="input"
        />
        <div>
          <img
            src="../assets/avatar.png"
            v-if="imgUrl == ''"
            alt=""
            @click="openImg"
          />
          <img :src="imgUrl" alt="" v-if="imgUrl != ''" @click="openImg" />
        </div>
      </div>
      <div class="inpBox">
        <span>企业名称</span>
        <div>
          <input type="text" placeholder="请输入企业名称" />
        </div>
      </div>
      <div class="inpBox">
        <span>联系电话</span>
        <div>
          <input type="text" placeholder="请输入联系电话" />
        </div>
      </div>
      <div class="inpBox">
        <span>所在城市</span>
        <div @click="prop(1)">
          <input type="text" v-model="cityValue" placeholder="请选择工作城市" readonly/>
        </div>
      </div>
      <div class="inpBox">
        <span>企业年限</span>
        <div @click="prop(5)">
          <input type="text" v-model="ageValue" placeholder="请选择企业年限" readonly/>
        </div>
      </div>
      <div class="inpBox">
        <span>企业规模</span>
        <div @click="prop(3)">
          <input type="text" v-model="stateValue" placeholder="请选择企业规模" readonly/>
        </div>
      </div>
      <div class="inpBox">
        <span>企业类型</span>
        <div>
          <input type="text" placeholder="请输入企业类型" />
        </div>
      </div>
      <div class="inpBoxs">
        <div class="inpBox">
          <span>公司简介</span>
          <span>选填</span>
        </div>
        <textarea name="" id="" placeholder="请填写公司简介" v-model="text"></textarea>
      </div>
    </div>

    <mt-popup v-model="cityIf" position="bottom">
      <p class="mt-p">
        <span @click="off(1)">取消</span> 请选择城市
        <span @click="on(1)">确定</span>
      </p>
      <mt-picker :slots="city" valueKey="name" :visibleItemCount	="5" @change="addressChange" :itemHeight="40"></mt-picker>
    </mt-popup>
    <mt-popup v-model="stateIf" position="bottom">
      <p class="mt-p">
        <span @click="off(3)">取消</span> 请选择企业规模
        <span @click="on(3)">确定</span>
      </p>
      <mt-picker
        :slots="stateLimit"
        @change="stateChange"
        value-key="value"
        class="picker"
      ></mt-picker>
    </mt-popup>
    <mt-popup v-model="ageIf" position="bottom">
      <p class="mt-p">
        <span @click="off(5)">取消</span> 请选择年限
        <span @click="on(5)">确定</span>
      </p>
      <mt-picker
        :slots="ageLimit"
        @change="ageChange"
        value-key="value"
        class="picker"
      ></mt-picker>
    </mt-popup>
  </div>
</template>

<script>
import { Popup, Picker } from "mint-ui";
//引入省市区数据json文件
  import threeLevelAddress from '../assets/address.json'
 var cityValue = "";
var stateValue = "";
var ageValue = "";
export default {
  inject: ["reload"],
  name: "means",
  components: {Popup, Picker},
  created() {
    // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
  },
  mounted() {
    // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
  },
  // data() 为变量赋值等
  data() {
    return {
      // status为状态，0是新增，1是修改
      status: localStorage.status,
      city: "",
      post:"",
      state:"",
      text:"",
      imgUrl:"",
      cityValue: "",
      cityIf: false,
      city: [
          //省
          {
            flex: 1,
            values: this.getProvinceArr(), //省份数组
            className: 'slot1',
            textAlign: 'center'
          },
           //分隔符
          {
            divider: true,
            content: '',
            className: 'slot2'
          },
          //市
          {
            flex: 1,
            values: this.getCityArr("北京市"),
            className: 'slot3',
            textAlign: 'center'
          },
          {
            divider: true,
            content: '',
            className: 'slot4'
          },
          //县
          {
            flex: 1,
            values: this.getCountyArr("北京市","北京市"),
            className: 'slot5',
            textAlign: 'center'
          }
        ],
      regionInit:false,
      stateValue: "",
      stateIf: false,
      stateLimit: [
        {
          values: ["不限", "100人以下", "100-200人", "200-500人", "500-1000人", "1000人以上"],
        },
      ],
      ageValue: "",
      ageIf: false,
      ageLimit: [
        {
          values: ["不限", "1年以内", "1-3年", "3-5年", "5-10年", "10年以上"],
        },
      ],
    };
  },
  // methods 编写js函数
  methods: {
    back() {
      this.$router.go(-1); //返回上一层
    },
    act(i){
      this.welfare[i].type=!this.welfare[i].type;
    },
    tirggerFile: function (event) {
      let file = event.target.files[0];
      let url = "";
      var reader = new FileReader();
      reader.readAsDataURL(file);
      let that = this;
      reader.onload = function (e) {
        url = this.result.substring(this.result.indexOf(",") + 1);
        that.imgUrl = "data:image/png;base64," + url;
      };
    },
    openImg() {
      this.$refs.input.click();
    },
    prop(i) {
      if (i == 1) {
        this.cityIf = !this.cityIf;
      } else if (i == 3) {
        this.stateIf = !this.stateIf;
      } else if (i == 5) {
        this.ageIf = !this.ageIf;
      }
    },
    
    addressChange(picker, values){
        if (this.regionInit){
          //给市、县赋值
          picker.setSlotValues(1, this.getCityArr(values[0]["name"]));
          picker.setSlotValues(2, this.getCountyArr(values[0]["name"], values[1]["name"]));
          //取值并赋值
          cityValue = values[2]["name"];
        }else {
          this.regionInit = true;
        }
      },
      //遍历json，返回省级对象数组
      getProvinceArr() {
        let provinceArr = [];
        threeLevelAddress.forEach(function (item) {
          let obj = {};
          obj.name = item.name;
          obj.code = item.code;
          provinceArr.push(obj);
        });
        return provinceArr;
      },
      //遍历json，返回市级对象数组
      getCityArr(province) {
        // console.log("省：" + province);
        let cityArr = [];
        threeLevelAddress.forEach(function (item) {
          if (item.name === province) {
            item.children.forEach(function (args) {
              let obj = {};
              obj.name = args.name;
              obj.code = args.code;
              cityArr.push(obj);
            });
          }
        });
        return cityArr;
      },
      //遍历json，返回县级对象数组
      getCountyArr(province,city){
        let countyArr = [];
        threeLevelAddress.forEach(function(item){
          if (item.name === province){
            item.children.forEach(function (args) {
              if (args.name === city){
                args.children.forEach(function (param) {
                  let obj = {};
                  obj.name=param.name;
                  obj.code=param.code;
                  countyArr.push(obj);
                })
              }
            });
          }
        });
        // console.log(countyArr);
        return countyArr;
      },
    stateChange(picker, values) {
      stateValue = picker.values[0];
    },
    ageChange(picker, values) {
      ageValue = picker.values[0];
    },
    on(i) {
      if (i == 1) {
        this.cityValue = cityValue;
        this.cityIf = false;
      }else if (i == 3) {
        this.stateValue = stateValue;
        this.stateIf = false;
      }else if (i == 5) {
        this.ageValue = ageValue;
        this.ageIf = false;
      }
    },
    off(i) {
      if (i == 1) {
        cityValue = "";
        this.cityIf = false;
      }else if (i == 3) {
        stateValue = "";
        this.stateIf = false;
      }else if (i == 5) {
        ageValue = "";
        this.ageIf = false;
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: #fff;
}
.head-fixed {
  width: 100%;
  height: 43px;
  position: fixed;
  z-index: 999;
}
.head {
  background: #3e63a8;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.back {
  width: 14px;
  height: 14px;
}
.head div img {
  width: 20px;
  height: 20px;
}
.head-search {
  box-sizing: border-box;
  flex: 1;
  text-align: center;
  font-size: 14px;
}
.content {
  position: relative;
  top: 43px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px 20px 20px;
}
.inpBox {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  border-bottom: 1px solid #eee;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 14px;
}
.inpBox img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.inpBox input {
  border: 0;
  flex: 1;
  outline: none;
  font-size: 14px;
  height: 30px;
  text-align: right;
}
.inpBox div {
  display: flex;
  align-items: center;
}
.inpBoxs {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.inpBoxs .inpBox{
    border: 0;
}
.inpBoxs textarea{
    width: 100%;
    height: 150px;
    margin-top: 10px;
    box-sizing: border-box;
    padding: 10px;
}
.welfareClass{
  display: flex;
  flex-wrap: wrap;
  width: 60%;
  box-sizing: border-box;
  justify-content: flex-end;
}
.welfareClass span{
  padding: 3px 5px;
  border: 1px solid #eee;
  margin-right: 10px;
  margin-bottom: 5px;
  font-size: 12px;
}
.active{
  background: #3e63a8;
  color: #fff;
  border-color: #3e63a8 !important;
}
</style>
